<template>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="管理员编号">
            <span style="margin-left: -1000px">{{ruleForm.adminId}}</span><!--ref="ruleForm"是与prop绑定的，prop只能用rulesForm里的值-->
        </el-form-item>

        <el-form-item label="账户名">
            <span style="margin-left: -1000px">{{ruleForm.adminName}}</span>
        </el-form-item>

        <el-form-item label="管理员昵称" prop="adminNickname">
            <el-input v-model="ruleForm.adminNickname" style="margin-left: -950px;width: 200px"></el-input>
        </el-form-item>

        <el-form-item label="管理员头像">
            <el-image
                    style="width: 100px; height: 100px; margin-left: -1000px"
                    :src="require('@/assets/img/adminProfilePictures/'+imageUrl)"
                    fit="contain">

            </el-image>
        </el-form-item>

        <div style="margin-left: -900px"><a style="color:#1b9aff;text-decoration:none" @click="showUpdate()" href="javascript:void(0)">修改密码</a></div>
        <div style="margin-left: -900px;margin-top: 30px"><a style="color:#1b9aff;text-decoration:none"@click="logOut()" href="javascript:void(0)">退出该账户</a></div>

        <div v-show="updateStatus" style="margin-top: 40px">
            <el-form-item label="当前密码" prop="adminCurrentPassword">
                <el-input show-password v-model="ruleForm.adminCurrentPassword" style="margin-left: -950px;width: 200px"></el-input>
            </el-form-item>

            <el-form-item label="新密码" prop="passwordOnce">
                <el-input show-password v-model="ruleForm.passwordOnce" style="margin-left: -950px;width: 200px"></el-input>
            </el-form-item>

            <el-form-item label="确认密码" prop="passwordTwice">
                <el-input show-password v-model="ruleForm.passwordTwice" style="margin-left: -950px;width: 200px"></el-input>
            </el-form-item>
        </div>

        <el-form-item>
            <el-button @click="resetForm('ruleForm')">取消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
    export default {
        name: 'AdminSetting',
        data() {
            return {
                adminId: null,
                updateStatus: false,//默认不展开修改密码区
                imageUrl: "2bd5d0af-40db-4d2d-a8ec-564e9f4e39b2.jpg",//管理员头像路径
                ruleForm: {  //管理员信息
                    passwordOnce: "",  //输入密码
                    passwordTwice: "", //确认密码
                    adminCurrentPassword:null,//当前密码
                    adminNickname:""
                },
                rules: {      //表单校验规则
                    adminNickname: [
                        {required: true, message: '请修改昵称', trigger: 'blur'},
                        {required: true,min: 1, max: 6, message: '长度在 1 到 6 个字符', trigger: 'blur'} //trigger指触发机制：blur是失去焦点触发，change是框内数据改变时触发
                    ],
                    adminCurrentPassword: [
                        {required: true, message: '请输入原密码', trigger: 'blur'},
                        {required: true,min: 1, max: 6, message: '长度在 1 到 6 个字符', trigger: 'blur'}
                    ],
                    passwordOnce: [
                        {required: true, message: '请输入新密码', trigger: 'blur'},
                        {min: 1, max: 6, message: '长度在 1 到 6 个字符', trigger: 'blur'}
                    ],
                    passwordTwice: [
                        {required: true, message: '请确认新密码', trigger: 'blur'},
                        {min: 1, max: 6, message: '长度在 1 到 6 个字符', trigger: 'blur'}
                    ],

                }
            };
        },
        methods: {
            submitForm(formName) {
                if (this.ruleForm.passwordOnce != this.ruleForm.passwordTwice) {
                    console.log("两次密码不一致！！！！！")
                    this.$message({ //提示
                        showClose: true,
                        center: true,
                        message: '两次密码输入不一致',
                        type: 'error'
                    })
                    this.resetForm(this.ruleForm)
                    return false;  //密码不一致，表单不提交
                }
                this.$refs[formName].validate((valid) => {
                    if (valid) {          //表单预验证通过就进行修改操作
                        this.ruleForm.adminPassword = this.ruleForm.passwordOnce  // 将新密码填入用户
                        console.log("要发送的信息",this.ruleForm)
                        this.$axios({
                            url: `/api/admin/${this.adminId}/${this.ruleForm.adminCurrentPassword}`,  //把原密码加进去进行检查
                            method: 'put',
                            data: {
                                ...this.ruleForm
                            }
                        }).then(res =>{
                            if (res.data ==1) {          //只有data返回1时成功
                                this.$message({ //成功修改提示
                                    showClose: true,  //设置手动关闭
                                    center: true,//内容居中
                                    message: '修改成功！！',
                                    type: 'success'
                                })
                                this.getAdminInfo()   //资料修改成功，更新页面
                            }else {
                                this.$message({
                                    showClose: true,
                                    type: "error",
                                    message: "密码错误，修改失败！",
                                    center: true //内容居中
                                });
                                this.resetForm(this.ruleForm);//失败后就要重置
                            }
                        }).catch(res => {   //服务器报错
                            this.$message({
                                showClose: true,
                                type: "error",
                                message: "修改失败！",
                                center: true //内容居中
                            });
                            this.resetForm(this.ruleForm);//失败后就要重置
                        })
                    } else {          //表单预验证没通过，警告框出现
                        this.updateStatus = true
                        this.$alert('看清楚！看清楚！看清楚！', '提交失败！', {
                            confirmButtonText: '确定',
                        });
                        return false;
                    }
                });
            },
            resetForm(formName) {  //取消修改则加载原来的值
                this.$axios.get(`/api/admin/${this.adminId}`).then(res => {
                    this.ruleForm = res.data
                    this.imageUrl =  this.ruleForm.adminProfilePictureSrc
                    this.ruleForm.passwordOnce=""
                    this.ruleForm.passwordTwice=""
                })
            },
            getAdminInfo() {  //获取管理员信息
                let _this = this
                _this.adminId = _this.$cookies.get("id")
                _this.$axios.get(`/api/admin/${_this.adminId}`).then(res => {
                    console.log("该管理信息", res)
                    _this.ruleForm = res.data
                    _this.imageUrl = _this.ruleForm.adminProfilePictureSrc
                }).catch(res => {      //查询失败
                })
            },
            showUpdate() {
                this.updateStatus = !this.updateStatus
            },
            logOut() {
                this.$router.push({name: "Login", params: {region: "管理员"}}) //跳转到登录页面
                this.$cookies.remove("nickName") //清除cookie
                this.$cookies.remove("id")
                this.$cookies.remove("region")
            }
        },
        created() {
            this.getAdminInfo();
        }
    }
</script>
